<template>
  <div class="toNexttick">
    <h2 class="title" ref="title">{{ message }}</h2>
    <div>{{ count }}</div>
    <button @click="addIncrement">+1</button>
  </div>
</template>
<script>
import { ref, onUpdated, nextTick } from 'vue'

export default {
  setup () {
    const message = ref('哈哈哈')
    const title = ref(null)
    const count = ref(0)
    const addIncrement = () => {
      message.value += '哈哈哈哈哈哈哈哈'
      count.value++
      // console.log(title.value)
      nextTick(() => {
        console.warn(title.value.offsetHeight)
      })
    }
    onUpdated(() => {
      // console.log(title.value.offsetHeight)
    })
    return {
      message,
      addIncrement,
      title,
      count
    }
  }
}
</script>
<style scoped>
.title {
  width: 120px;
}
</style>
